<!-- 投票信息 -->

<template>
	<Card>
		<template #head>
			<view class="u-flex u-row-between">
				<view class="">
					投票信息
				</view>
				<view class="">
					<u-icon name="clock" color="#409EFF"></u-icon>
					<text @click="showHistoryVote" class="history-label u-margin-left-10">
						历史投票
					</text>
				</view>
			</view>
		</template>
		<template #body>
			<view class="vote-title u-margin-top-30">
				{{VoteData.title}}
			</view>
			<view class="vote-date u-margin-top-10">
				<text>{{VoteData.startTime}}</text>
				<text class="u-margin-left-20 u-margin-right-20">-</text>
				<text>{{VoteData.endTime || '无限制'}}</text>
			</view>
			<view class="vote-interval u-margin-top-40 u-flex" v-if="InterValTimeStamp">
				<text class="vote-interval-label">
					倒计时
				</text>
				<view class="vote-interval-value u-margin-left-20 u-flex-1">
					<u-count-down separator="zh" @end="onTimeEnd" :timestamp="InterValTimeStamp"></u-count-down>
				</view>
			</view>
			<view class="u-margin-top-30">
				<text class="vote-label">
					未投票
				</text>
				<text class="vote-value u-margin-left-20">
					{{NoVotePerson}}
				</text>
			</view>
			<radio-group name="" @change="changeRadioGroup">
				<view class=" vote-item u-padding-top-20 u-padding-bottom-20 u-border-bottom">
					<view class="u-flex">
						<view class="vote-result-label u-flex-2 agree">
							同意:{{VoteData.affirmativeNum}}票
						</view>
						<view class="u-flex-4 u-flex">
							<text class="vote-result-text u-flex-1 u-margin-right-10">
								占比
							</text>
							<view class="u-flex-4">
								<u-line-progress height="16" :show-percent="false" active-color="#07c160" :percent="AgreePer"></u-line-progress>
							</view>
							<text class="vote-result-per u-flex-1 u-margin-left-20">
								{{AgreePer}}%
							</text>
						</view>
						<view class="u-flex-1 u-text-right" v-if="!IsMyVote">
							<radio color="#409eff" :value="1" />
						</view>
					</view>

					<view class="u-margin-top-30">
						<text class="vote-result-name">{{AgreePerson}}</text>
					</view>
				</view>
				<view class=" vote-item u-padding-top-20 u-padding-bottom-20 u-border-bottom">
					<view class="u-flex">
						<view class="vote-result-label u-flex-2 noagree">
							不同意:{{VoteData.dissentingNum}}票
						</view>
						<view class="u-flex-4 u-flex">
							<text class="vote-result-text u-flex-1 u-margin-right-10">
								占比
							</text>
							<view class="u-flex-4">
								<u-line-progress height="16" :show-percent="false" active-color="#F56C6C" :percent="NoAgreePer"></u-line-progress>
							</view>
							<text class="vote-result-per u-flex-1 u-margin-left-20">
								{{NoAgreePer}}%
							</text>
						</view>
						<view class="u-flex-1 u-text-right " v-if="!IsMyVote">
							<radio color="#409eff" :value="-1" />
						</view>
					</view>

					<view class="u-margin-top-30">
						<text class="vote-result-name">{{NoAgreePerson}}</text>
					</view>
				</view>
				<view class=" vote-item u-padding-top-20 u-padding-bottom-20 u-border-bottom">
					<view class="u-flex">
						<view class="vote-result-label u-flex-2 waiver">
							弃权:{{VoteData.abstentionNum}}票
						</view>
						<view class="u-flex-4 u-flex">
							<text class="vote-result-text u-flex-1 u-margin-right-5">
								占比
							</text>
							<view class="u-flex-4">
								<u-line-progress height="16" :show-percent="false" active-color="#666666" :percent="WaiverPer"></u-line-progress>
							</view>
							<text class="vote-result-per u-flex-1 u-margin-left-20">
								{{WaiverPer}}%
							</text>
						</view>
						<view class="u-flex-1 u-text-right " v-if=" !IsMyVote">
							<radio color="#409eff" :value="2" />
						</view>
					</view>

					<view class="u-margin-top-30">
						<text class="vote-result-name">{{WaiverPerson}}</text>
					</view>
				</view>
			</radio-group>
			<view class="u-text-right u-margin-top-30" v-if="!IsMyVote">
				<HButton size="small" :block="false" @click="confirmVote">确认投票</HButton>
			</view>
			<HistoryVote ref="HistoryVote" :data="HistoryData"></HistoryVote>
		</template>

	</Card>
</template>

<script>
	import Card from '@/components/card/components/cardDetail.vue'
	import HButton from '@/components/button/index.vue'
	import ProjectApi from '@/apis/project.js'
	import { Storage_UserInfo } from '@/common/index.js'
	import HistoryVote from '@/pages/demand/operation/historyVote.vue'
	export default {

		components: {
			Card,
			HButton,
			HistoryVote
		},
		props: {
			data: {
				type: Array,
				default: () => {
					return []
				}
			},
			itemCode: {
				type: String,
				default: ''
			}
		},
		computed: {
			HistoryData() {
				let data = this.voteData.length ? this.voteData : this.data;
				let filterVoteHistory = data.filter((item) => item.wait.length === 0)
				return filterVoteHistory


			},
			VoteData() {
				let data = this.voteData.length ? this.voteData : this.data;
				let len = data.length
				console.log(this.voteData, 'ssss');
				if (len) {
					let arr = data.sort((a, b) => {
						return b.id - a.id
					})
					return arr[0]
				}
				return null
			},
			VoteId() {
				return this.VoteData.id
			},
			// 我是否投票 
			IsMyVote() {
				let { affirmative, dissenting, abstention } = this.VoteData || []
				let all = [...affirmative, ...dissenting, ...abstention]
				let userIds = all.map((item) => item.userId)
				let { id } = Storage_UserInfo()
				return userIds.indexOf(id) > -1
			},
			InterValTimeStamp() {

				let { endTime, waitNum } = this.VoteData
				if (waitNum) {
					if (endTime) {
						let _endTime = new Date(endTime).getTime() / 1000

						let nowTime = new Date().getTime() / 1000
						let time = parseInt(_endTime) - parseInt(nowTime)
						console.log(time, 'time');
						return time
					}
				}
				return ''
			},
			// 同意百分比
			AgreePer() {
				let { abstentionNum, dissentingNum, affirmativeNum } = this.VoteData
				let total = abstentionNum + dissentingNum + affirmativeNum
				if (!total) {
					return 0
				} else {
					let per = affirmativeNum / total * 100
					return per.toFixed(0)
				}

			},
			// 同意投票人员
			AgreePerson() {
				let { affirmative } = this.VoteData || []
				if (affirmative.length) {
					let users = affirmative.map((item) => item.name)
					return users.join('、')
				}
				return ''
			},
			// 不同意百分比
			NoAgreePer() {
				let { abstentionNum, dissentingNum, affirmativeNum } = this.VoteData
				let total = abstentionNum + dissentingNum + affirmativeNum
				if (!total) {
					return 0
				} else {
					let per = dissentingNum / total * 100
					return per.toFixed(0)
				}

			},
			// 不同意投票人员
			NoAgreePerson() {
				let { dissenting } = this.VoteData || []
				if (dissenting.length) {
					let users = dissenting.map((item) => item.name)
					return users.join('、')
				}
				return ''
			},
			// 弃权百分比
			WaiverPer() {
				let { abstentionNum, dissentingNum, affirmativeNum } = this.VoteData
				let total = abstentionNum + dissentingNum + affirmativeNum
				if (!total) {
					return 0
				} else {
					let per = abstentionNum / total * 100
					return per.toFixed(0)
				}
			},
			// 弃权投票人员
			WaiverPerson() {
				let { abstention } = this.VoteData || []
				if (abstention.length) {
					let users = abstention.map((item) => item.name)
					return users.join('、')
				}
				return ''
			},

			//未投票人员
			NoVotePerson() {
				let { wait } = this.VoteData || []
				console.log(wait, 'wait');
				if (wait.length) {
					let users = wait.map((item) => item.name)
					return users.join('、')
				}
				return ''
			},
		},

		data() {
			return {
				voteResult: '',
				voteData: [],
			}
		},
		methods: {
			showHistoryVote() {
				console.log('sdds');
				this.$refs.HistoryVote.openPopUp()
			},
			onTimeEnd() {

			},
			changeRadioGroup({ detail }) {
				let { value } = detail
				this.voteResult = value
			},
			//确定投票
			confirmVote() {
				if (this.voteResult == '') {
					return this.$msg('请选择投票结果!')
				}
				this.$showloading()
				ProjectApi.Demand.SubmitVote(this.VoteId, this.voteResult).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						this.$msg('投票成功')
						this.getVoteData()
					}
				}).catch(err => {
					this.$msg(err.msg)
				})

			},
			getVoteData() {
				ProjectApi.Demand.GetVote(this.itemCode).then((res) => {
					if (res.code == 0) {
						let { vote } = res.body
						console.log(vote, 'vote');
						this.voteData = vote
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.history-label {
		font-weight: 400;
		font-size: 28rpx;
		color: #409EFF;
	}

	.agree {
		color: #07C160;
	}

	.noagree {
		color: #F56C6C;
	}

	.waiver {
		color: #666666;
	}

	.vote {
		&-title {
			font-weight: 600;
			font-size: 34rpx;
			color: #0F2E4D;
		}

		&-date {
			font-weight: 400;
			font-size: 24rpx;
			color: #98A5B3;
		}

		&-interval {
			&-label {
				font-weight: 400;
				font-size: 28rpx;
				color: #98A5B3;
			}

			&-value {
				font-weight: 400;
				font-size: 28rpx;
				color: #0F2E4D;
			}
		}

		&-label {

			font-weight: 400;
			font-size: 28rpx;
			color: #98A5B3;
		}

		&-value {
			font-weight: 400;
			font-size: 28rpx;
			color: #0F2E4D;

		}

		&-item {
			// flex-direction: column;
		}

		&-result {
			&-label {
				font-weight: 400;
				font-size: 32rpx;
			}

			&-text {
				font-weight: 400;
				font-size: 28rpx;
				color: #98A5B3;
				white-space: nowrap
			}

			&-per {
				font-weight: 400;
				font-size: 28rpx;
				color: #0F2E4D;
			}

			&-name {
				font-weight: 400;
				font-size: 24rpx;
				color: #98A5B3;
			}
		}

	}
</style>
